<template>
  <div id="components-modal-demo-position">
    <a-modal
      centered
      :visible="true"
      title="修改密码"
      :footer="null"
      @cancel="cancel"
      class="addForm"
    >
      <a-form-model
        ref="ruleForm"
        :model="params"
        :rules="rules"
        class="joinForm"
        v-bind="layout"
      >
        <a-form-model-item ref="oldPassword" label="请输入原密码" prop="oldPassword">
          <a-input
            placeholder=""
            v-model="params.oldPassword"
            @blur="
              () => {
                $refs.oldPassword.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="newPassword" label="请输入新密码" prop="newPassword">
          <a-input
            placeholder=""
            type="password"
            v-model="params.newPassword"
            @blur="
              () => {
                $refs.newPassword.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="oldPasswordTow" label="确认新密码" prop="oldPasswordTow">
          <a-input
            placeholder=""
            type="password"
            v-model="params.oldPasswordTow"
            @blur="
              () => {
                $refs.oldPasswordTow.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
      </a-form-model>
      <div class="btnClass">
        <a-button @click="cancel" class="cancel commonBtn">取消</a-button>
        <a-button type="primary" class="commonBtn" @click="confirmClick"
          >确认</a-button
        >
      </div>
    </a-modal>
  </div>
</template>
<script>
import { updatePwd } from '@/api/accountInfos'
export default {
  props: {},
  data() {
    var validateNewReapeat = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.params.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      Visible: true,
      params:{
        oldPassword:'',
        newPassword:'',
        // code:'',
        oldPasswordTow:'',
      },
      // curCaptchaPath:'',
      rules: { 
        oldPassword: [{ required: true, message: '请输入旧密码!', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '请输入新密码!', trigger: 'blur' },
          {
            pattern: /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/,
            message: "请输入6-20位含有字母、数字或符号！"}
        ],
        oldPasswordTow: [{ required: true, validator: validateNewReapeat, trigger: 'blur' }]
      },
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancelVisible', false)
    },
    cancel() {
      this.$emit('cancel')
    },
    confirmClick(){
      if(this.params.newPassword !== this.params.oldPasswordTow){
        this.$message.warning('两次输入的密码不相同!')
        return
      }
      if(this.params.oldPassword === '' && this.params.oldPasswordTow === '' && this.params.oldPasswordTow === ''){
        this.$message.warning('请输入对应的信息!')
        return
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          Reflect.deleteProperty(this.params, 'oldPasswordTow')  //删除adress属性
          updatePwd(this.params).then(res=>{
            if(res.code === 200){
              this.$message.success('修改密码成功!')
              this.$router.push({name:'Login'})
            }else{
              this.$message.warning(res.msg)
            }
          })
        }else {
          return false;
        }
  
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .ant-modal-header {
  border: none;
}
::v-deep .ant-modal-title {
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}
.btnClass {
  margin-top: 20px;
  .ant-btn {
    background: #2d5acb;
    color: #fff;
    border: 1px solid #2d5acb;
  }
}
</style>

